<!DOCTYPE html>
<html>
<head>
	<title>用户中心</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../static/css/main.css">
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/uuid.js"></script>
	<script src="../static/js/v-avatar-2.0.3.min.js"></script>
  <script src="../static/js/main.js"></script>
</head>
<body>
	<div class="app user" id="app">
		<div class="bg">
      <img src="../static/images/bg0.jpg">
    </div>
		<img class="back" @click="back" src="../static/images/user_back.png" alt="">
		<img class="setting" @click="setting" src="../static/images/setting.png" alt="">
		<div class="header">
			<div class="info">
				<div class="avatar">
					<img class="avatar_bf" src="../static/images/avatar_bf.png" alt="">
					<!-- <img class="user_avatar" :src="user_info.avatar" alt=""> -->
					<div class="user_avatar">
						<v-avatar v-if="user_info.avatar" :src="user_info.avatar" :size="55" :rounded="true"></v-avatar>
						<v-avatar v-else-if="user_info.nickname" :username="user_info.nickname" :size="55" :rounded="true"></v-avatar>
						<v-avatar v-else :username="user_info.id" :size="55" :rounded="true"></v-avatar>
					</div>
					<img class="avatar_border" src="../static/images/avatar_border.png" alt="">
				</div>
				<p class="user_name">{{user_info.nickname}}</p>
			</div>
			<div class="wallet">
				<div class="balance">
					<p class="title"><img src="../static/images/money.png" alt="">钱包</p>
					<p class="num">{{game.money(user_info.money)}}</p>
				</div>
				<div class="balance">
					<p class="title"><img src="../static/images/integral.png" alt="">果子</p>
					<p class="num">{{game.money(user_info.credit)}}</p>
				</div>
			</div>
			<div class="invite">
				<img class="invite_btn" src="../static/images/invite.png" alt="">
			</div>
		</div>
		<div class="menu">
				<div class="item" @click="open_friend_list">
					<span class="title">我的好友</span>
					<span class="value">查看</span>
				</div>
				<div class="item">
					<span class="title">我的主页</span>
					<span class="value">查看</span>
				</div>
				<div class="item">
					<span class="title">任务列表</span>
					<span class="value">75%</span>
				</div>
				<div class="item">
					<span class="title">收益明细</span>
					<span class="value">查看</span>
				</div>
				<div class="item">
					<span class="title">实名认证</span>
					<span class="value">未认证</span>
				</div>
			</ul>
		</div>
	</div>
	<script>
	apiready = function(){
    var game = new Game("../static/mp3/bg1.mp3");
    // 在 #app 标签下渲染一个按钮组件
    Vue.prototype.game = game;
		new Vue({
			el:"#app",
			data(){
				return {
					prev:{name:"",url:"",params:{}},
					token: "",
					user_info:{},
					current:{name:"user",url:"user.html",params:{}},
				}
			},
			mounted(){
				this.token = this.game.getdata("access_token") || this.game.getfs("access_token");
				this.user_info = this.game.get_user_data(this.token).sub;
				// 事件监听
				this.listener();
			},
			methods:{
				  back(){
            // 返回首页
						// setInterval(()=>{
						// 	alert("有新的朋友申请添加您为好友！");
						// 	this.game.openWin("user","user.html");
						// },5000);

						// this.game.closeWin(); // 此处不能关闭窗口！！！关闭了窗口，user.html中将来与服务端进行的通信就断了。
            this.game.openWin("root");
          },
					setting(){
						this.game.openFrame("user","setting.html");
					},
					listener(){
						// 全局事件监听方法
						this.upload_user_data_listener();	//监听是否更新了用户信息
					},
					upload_user_data_listener(){
						// 更新用户信息的监听事件
						api.addEventListener({
						    name: 'upload_access_token',
						}, (ret, err)=>{
								let access_token = this.game.getdata("access_token") || this.game.getfs("access_token");
								this.user_info = this.game.get_user_data(access_token).sub;
						});
					},
					open_friend_list(){
						// 打开好友列表窗口
						this.game.openFrame("friends","friends.html");
						this.game.openFrame("friend_list","friend_list.html","from_right",{
							x: 0,             // 左上角x轴坐标
							y: 194,           // 左上角y轴坐标
							w: 'auto',        // 当前帧页面的宽度, auto表示满屏
							h: 'auto'         // 当前帧页面的高度, auto表示满屏
						});
					}
			}
		});
	}
	</script>
</body>
</html>
